<template>
    <div class="performance-page">
        <div class=page-box>
            <div class="title">
                <span>绩效管理/绩效详情</span> <span class="back-btn" @click="() => this.$router.back()"><img src="../../assets/images/icon_comm_back.png" alt="">返回</span>
            </div>
                <!-- 基本信息 -->
                <div class="content-box">
                    <div class="content-title">
                        <img src="../../assets/images/icon_16_title.png" alt=""> 基本信息
                    </div>
                    <div class="text-box">
                        <el-descriptions :column="3" border>
                            <el-descriptions-item label="项目名称" 
                            label-class-name="performance-info-label"
                            content-class-name="performance-info-content">
                                {{performanceData.name}}
                            </el-descriptions-item>
                            <el-descriptions-item label="项目性质" 
                            label-class-name="performance-info-label"
                            content-class-name="performance-info-content">
                                {{performanceData.nature==0?'年度项目':'增补项目'}}
                            </el-descriptions-item>
                            <el-descriptions-item label="所属计划"
                             label-class-name="performance-info-label"
                            content-class-name="performance-info-content">
                                {{performanceData.annulProjectPlanName}}
                            </el-descriptions-item>
                            <el-descriptions-item label="项目单位"
                            label-class-name="performance-info-label"
                            content-class-name="performance-info-content">
                                {{performanceData.company}}
                            </el-descriptions-item>            
                            <el-descriptions-item label="项目类别"
                             label-class-name="performance-info-label"
                            content-class-name="performance-info-content">
                                {{
                                    performanceData.type==='0'?'建设类（新开工）':
                                    performanceData.type==='1'?'建设类（续建）':
                                    performanceData.type==='2'?'购买服务类':
                                    performanceData.type==='3'?'运维类':'其他'

                                }}
                            </el-descriptions-item>            
                            <el-descriptions-item label="考核时间"
                             label-class-name="performance-info-label"
                            content-class-name="performance-info-content">
                                {{performanceData.startTime + ' ~ ' + performanceData.endTime}}
                                </el-descriptions-item>            
                        </el-descriptions>
                    </div>
                </div>
                <!-- 绩效评分 -->
                <div class="content-box">
                    <div class="content-title">
                        <img src="../../assets/images/icon_16_title.png" alt=""> 绩效评分
                    </div>
                    <div class="text-box1">
                        <span>绩效评分</span>
                        <span>{{performanceData.score}}</span>
                    </div>
                </div>
                <!-- 绩效统计 -->
                <div class="content-box">
                    <div class="content-title">
                        <img src="../../assets/images/icon_16_title.png" alt=""> 绩效统计
                    </div>
                    <div>
                         <vxe-table
                                ref="table"
                                border
                                cell-class-name="table-cell"
                                class="list-table"
                                :data="performanceData.perIndectorsDetailsVos"
                                header-cell-class-name="table-header-cell"
                                header-row-class-name="table-header"
                                :loading="loading"
                                show-header-overflow="ellipsis"
                                show-overflow="tooltip"
                            >   
                                <vxe-table-column
                                type="seq"
                                title='序号'
                                width="60"
                                >
                    <!-- { type:'seq', width: '60', title: '序号' }, -->
                                </vxe-table-column>

                                <vxe-table-column
                                v-for="item in tableColumn"
                                :key="item.field"
                                v-bind="item"
                                >
                                <template slot-scope="scope">
                                    <span v-if="item.field=='numerical'">
                                        {{(scope.row.regulation=='0'? '>':scope.row.regulation=='1'?"≥":scope.row.regulation=='2'?"=":
                                        scope.row.regulation=='3'?"≤":"<")
                                        + scope.row.value}}
                                    </span>
                                    <span v-else>
                                        {{scope.row[item.field]}}
                                    </span>
                                </template>
                                </vxe-table-column> 
                            </vxe-table>
                    </div>
                </div>
        </div>
    </div>
</template>

<script>
import{getStatisDetails} from "@/api/manage/messsage"
    export default {
        components:{
        },
        data(){
            return{
                queryForm:{},
                time:'',
                tableColumn:[
                    { field: 'indicatorsName', title: '指标名称' },
                    { field: 'numerical', title: '指标数值' },
                    { field: 'indicatorsWeight', title: '指标权重' },
                    { field: 'score', title: '指标得分' },
                ],
                tableData:[],
                queryFormRules:{},
                loading:false,
                proid:'',//id
                performanceData:{}
            }
        },
        methods:{
            getDetails(){
                getStatisDetails(this.proid).then(res =>{
                    if(res.code==200){
                        this.performanceData=res.data
                    }
                })
            }
        },
        created(){
            this.proid=this.$route.query.id
            this.getDetails()
        }
    }
</script>

<style lang="scss" scoped>
.performance-page{
    padding:16px;
    background:#f5f5f5;
    .page-box{
        padding:24px;
        background:#fff;
        border-radius: 10px;
        // width:1680px;
        .title{
            // width:1680px;
            font-size: 18px;
            font-family: PingFang SC, PingFang SC-Medium;
            font-weight: 500;
            color: #000000;
            line-height: 18px;
            text-align: left;
            display: flex;
            justify-content: space-between;
            margin-bottom:24px;
            .back-btn{
                margin-right:26px;
                font-size: 14px;
                font-family: PingFang SC, PingFang SC-Regular;
                font-weight: 400;
                color: #333333;
                display: flex;
                align-items: center;
                cursor: pointer;
                img{
                    margin-right:7px;
                }

            }
        }
        .content-box{
            .content-title{
                // width: 1600px;
                height: 50px;
                line-height: 50px;
                display: flex;
                align-items: center;
                border:1px solid #ebecef;
                border-right:0;
                border-left:0;
                 margin:24px 0;
                img{
                    margin-right:6px;
                }
            }
            .content-title1{
                display: flex;
                justify-content: space-between;
                >span{
                    display: inline-block;
                }
            }
            .content-text{
                display: flex;
                &>:not(:first-child){
                    margin-left:21px;
                }
            }
            .text-box{
                display: flex;
                flex-wrap: wrap;
                font-size:14px;
                font-family: PingFang SC, PingFang SC-Regular;
                font-weight: 400;
                color: #666666;
            }
            .text-box1{
                border:1px solid #ebecef;
                width:1600px;
                >span{
                    display: inline-block;
                }
                &>:first-child{
                    width: 267px;
                    height: 48px;
                    background: #fafafa;
                    font-size: 14px;
                    font-family: PingFang SC, PingFang SC-Regular;
                    font-weight: 400;
                    text-align: CENTER;
                    color: #666666;
                    line-height:48px;
                    border-right:1px solid #ebecef;
                }
                &>:last-child{
                    text-indent: 23px;
                    font-size: 14px;
                    font-family: PingFang SC, PingFang SC-Regular;
                    font-weight: 400;
                    color: #333333;
                }
            }
            .charts-box{
                &>div{
                    display: flex;
                    // width:
                }
            }
        }
    }
}
</style>
<style lang="scss" >
.el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
  text-align: center;
}
.text-box{
    .performance-info-label{
        width:267px;
        height:48px;
    }
    .performance-info-content{
        height:48px;
        width:267px;
    }
}
</style>